<template>
  <div class="tools-container">
    <el-page-header @back="onBack" title="关闭" content="知识库管理" :icon="CloseBold" style="color: white;" />

    <!-- URL 输入 + 开始爬取 -->
    <div class="input-section">
      <el-input
        v-model="crawlUrl"
        placeholder="请输入要爬取的网址或文件链接"
        class="url-input"
        clearable
      />
      <el-button type="primary" @click="startCrawling" class="crawl-btn">
        开始爬取
      </el-button>
    </div>

    <!-- 骨架屏 & 爬取状态 -->
    <el-skeleton :loading="loading" animated>
      <template #template>
        <div class="crawler-card">
          <el-skeleton-item variant="text" style="width: 30%" />
          <el-skeleton-item variant="text" style="width: 80%; margin-top: 10px;" />
          <el-skeleton-item variant="text" style="width: 60%; margin-top: 10px;" />
        </div>
      </template>
      <template #default>
        <div class="crawler-card">
          <div class="crawler-header">CUMT 知识爬取状态</div>
          <div class="crawler-content">
            <div>已爬取文件：<span class="highlight">128</span> 个</div>
            <div>最近更新时间：<span class="highlight">2025-04-05</span></div>
            <div>状态：<span class="status success">运行中</span></div>
          </div>
        </div>
      </template>
    </el-skeleton>

    <!-- 构建按钮区域 -->
    <div class="action-buttons">
      <el-button type="primary" size="large" icon="el-icon-plus" @click="buildKnowledgeBase">
        构建知识库
      </el-button>
      <el-button type="success" size="large" icon="el-icon-connection" @click="buildGraph">
        创建知识图谱
      </el-button>
      <el-button type="warning" size="large" icon="el-icon-refresh" @click="updateKnowledgeBase">
        更新知识库
      </el-button>
    </div>

    <!-- 时间轴历史记录 -->
    <el-timeline class="timeline-section">
      <el-timeline-item timestamp="2025/04/05" color="#409EFF">
        成功更新知识库，新增 45 个条目
      </el-timeline-item>
      <el-timeline-item timestamp="2025/04/01" color="#67C23A">
        构建图谱成功，节点数：560，关系数：1200
      </el-timeline-item>
      <el-timeline-item timestamp="2025/03/28" color="#E6A23C">
        第一次构建知识库，初始化完成
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import { CloseBold } from "@element-plus/icons-vue";

export default {
  name: "ManageMent",
  data() {
    return {
      CloseBold,
      loading: false,
      crawlUrl: "", // 新增 URL 绑定
      tools: [
        {
          title: "联网搜索",
          value: "search",
          icon: "el-icon-search",
          active: false
        },
        {
          title: "CUMT知识库RAG检索",
          value: "rag",
          icon: "el-icon-notebook-2",
          active: false
        },
        {
          title: "CUMT知识图谱检索",
          value: "graph",
          icon: "el-icon-connection",
          active: false
        },
        {
          title: "文件对话",
          value: "file",
          icon: "el-icon-folder-opened",
          active: false
        }
      ]
    };
  },
  methods: {
    onBack() {
      this.$router.back();
    },
    buildKnowledgeBase() {
      this.$message.success("开始构建知识库...");
    },
    buildGraph() {
      this.$message.success("开始构建知识图谱...");
    },
    updateKnowledgeBase() {
      this.$message.info("知识库更新中...");
    },
    startCrawling() {
      if (!this.crawlUrl.trim()) {
        this.$message.warning("请输入有效的 URL！");
        return;
      }
      this.$message.success(`开始爬取：${this.crawlUrl}`);
      // TODO: 实际请求逻辑
    }
  },
  mounted() {
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
    }, 1500); // 模拟加载动画
  }
};
</script>

<style scoped>
:root {
  --theme-blue: #409EFF;
  --theme-blue-light: #f0f7ff;
  --theme-blue-border: #a0cfff;
  --theme-blue-hover: rgba(64, 158, 255, 0.15);
  --card-font-color: #2c3e50;
}

.tools-container {
  padding: 16px;
}

:deep(.el-page-header) {
  margin-bottom: 20px;
}

:deep(.el-page-header__content),
:deep(.el-page-header__back) {
  color: var(--card-font-color);
}

.input-section {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.url-input {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
}

.crawl-btn {
  min-width: 100px;
  height: 40px;
  padding-left: -5px;
}

.crawler-card {
  margin-top: 30px;
  padding: 20px;
  border-radius: 14px;
  background: #f0f7ff;
  border: 1px solid var(--theme-blue-border);
  box-shadow: 0 4px 10px rgba(64, 158, 255, 0.05);
}

.crawler-header {
  font-size: 16px;
  font-weight: bold;
  color: var(--card-font-color);
  margin-bottom: 10px;
}

.crawler-content {
  font-size: 14px;
  color: #606266;
  line-height: 1.8;
}

.crawler-content .highlight {
  color: var(--theme-blue);
  font-weight: 600;
}

.status {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.status.success {
  background-color: #ecf5ff;
  color: #409EFF;
}

.action-buttons {
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
  gap: 24px;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  min-width: 160px;
  height: 48px;
  font-size: 16px;
}

.timeline-section {
  margin-top: 40px;
}
:deep(.el-timeline-item__timestamp),
:deep(.el-timeline-item__content) {
  color: #ffffff !important;
}
</style>
